/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="modal-content">
      <div class="basic">
        <div class="img"><img :src="data.litpic" alt=""></div>
        <div class="info">
            <h3>{{data.title}}</h3>
            <p>类型：{{data.type | toChinese}}</p>
            <p>面积：{{data.levy_area}} ㎡</p>
            <p>户数：{{data.levy_number}} 户</p>
            <p>地址：{{data.address}}</p>
            <p>状态：{{data.status | toChinese}}</p>
        </div>
      </div>
      <div class="abstract" v-html="data.abstract"></div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  data() {
    return {};
  },
  filters: {
    toChinese(val) {
      switch (val) {
        case "IN_PLAN":
          val = "计划中";
          break;
        case "IN_PROGRESS":
          val = "实施中";
          break;
        case "COMPLETED":
          val = "已完成";
          break;
        case "GY":
          val = "国有项目";
          break;
        case "JT":
          val = "集体项目";
          break;
        default:
          val = "未知";
      }
      return val;
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
.modal-content {
  font-size: 14px;
  .basic {
    width: 100%;
    height: 200px;
    overflow: hidden;
    .img {
      display: inline-block;
      // max-width: 200px;
      width: 40%;
      float: left;
      img {
        max-width: 100%;
        max-height: 200px;
      }
    }
    .info {
      display: inline-block;
      width: 60%;
      padding: 0 20px;
      h3 {
        font-weight: 500;
        font-size: 1.5em;
        margin: 10px 0;
      }
      p {
        text-align: left;
        line-height: 25px;
      }
    }
  }
  
}
</style>
